<template>
  <div class="btns clearfix">
    <a href="javascript:;" class="prev" title="上一首(ctrl+←)" @click="nextSong(-1)"
      >上一首</a
    >
    <a
      href="javascript:;"
      class="play-base"
      title="播放/暂停(p)"
      :class="cut"
      @click="cliCut"
      >播放/暂停</a
    >
    <a href="javascript:;" class="next" title="下一首(ctrl+→)" @click="nextSong(1)"
      >下一首</a
    >
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
import nextSongMixin from "@/baseFnMixin/nextSongMixin.js";
export default {
  name: "PlayBtn",
  setup() {
    //  控制播放与暂停按钮
    // let flag = ref(true);
    const store = useStore();
    const flag = computed(() => store.state.PlaySong.flag);
    //  更改播放/暂停 图标
    const cut = computed(() => {
      return flag.value ? " play" : "pause";
    });
    //  vuex
    const nextsong = nextSongMixin();
    //  播放
    function cliCut() {
      store.commit("PlaySong/PlaySong", !flag.value);
    }

    return {
      flag,
      cut,
      cliCut,
      ...nextsong,
    };
  },
  mounted() {
    //  按键快捷 控制歌曲播放
    document.onkeyup = function (e) {
      if (e.ctrlKey) {
        if (e.code === "ArrowLeft") {
          console.log(11111111111);
        } else if (e.code === "ArrowRight") {
          console.log(333333);
        }
      } else if (e.code === "KeyP") {
        console.log(444444);
      }
    };
  },
};
</script>

<style scoped lang="less">
.btns {
  float: left;
  padding: 6px 0 0 0;
  width: 137px;
}
.prev {
  float: left;
  margin: 5px 8px 0 0;
  width: 28px;
  height: 28px;
  background: url("../../../../common/images/playbar.png");
  background-repeat: no-repeat;
  background-position: 0 -130px;
  text-indent: -9999px;
  &:hover {
    background-position: -30px -130px;
  }
}

.play-base {
  float: left;
  margin: 0 8px 0 0;
  width: 36px;
  height: 36px;
  background-image: url("../../../../common/images/playbar.png");
  background-repeat: no-repeat;
  text-indent: -9999px;
}
.play {
  background-position: 0 -204px;
  &:hover {
    background-position: -40px -204px;
  }
}
.pause {
  background-position: 0 -165px;
  &:hover {
    background-position: -40px -165px;
  }
}
.next {
  float: left;
  margin: 5px 8px 0 0;
  width: 28px;
  height: 28px;
  background: url("../../../../common/images/playbar.png") no-repeat -80px -130px;
  text-indent: -9999px;
  &:hover {
    background-position: -110px -130px;
  }
}
</style>
